<template>
    <div class="day-view">
        <div class="date-box">
            <div class="date-title">{{currDay.month}}月</div>
            <div class="date-content">
                <div class="date-week-day">{{currDay.weekDay}}</div>
                {{currDay.date}}
            </div>
        </div>
        <div class="task-title">今日安排</div>
        <div class="task-list">
            aaa
        </div>
    </div>  
</template>

<script>

export default {
    components: {  },
    data() {
        return {
        }
    },
    props: {
        currDay: {
            type: Object,
            required: true
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
@import '../../styles/var.scss';
.day-view {
    .date-box {
        width: 70%;
        margin-left: 10%;
        text-align: center;
        box-shadow: 5px 5px 5px #ddd;
        .date-title {
            height: 60px;
            line-height: 60px;
            color: #fff;
            font-size: 36px;
            background: $primary;
        }
        .date-content {
            height: 180px;
            font-size: 120px;
            font-weight: bold;
            .date-week-day {
                margin-top: 16px;
                font-size: 14px;
                font-weight: normal;
                color: $primary;
            }
        }
    }
    .task-title {
        font-size: 16px;
        margin: 30px 0;
    }
}

</style>